<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>京东左侧导航栏</title>
    <style>
        body{
            background-color: burlywood;
        }
        .list{
            width:190px;
            height:470px;
            margin:50px auto;
            background-color: #FEFEFE;
            padding:10px 0;
            
        }
        div{
            padding-left:18px;
            height:25px;
            line-height: 25px;
        }
        div>span{
            padding: 0 2px 0 2px;
            font-size:12px;
        }
        div>a{
            font-size: 14px;
            color:#333;
            text-decoration: none;
        }
        div>a:hover{
            color: red;
        }
        div:hover{
            background-color: #d9d9d9;
        }

    </style>
</head>

<body>
    <nav class="list">
        <div>
            <a href="javasript:;">家用电器</a>
        </div>
        <div>
            <a href="javasript:;">手机</a><span>/</span>
            <a href="javasript:;">运营商</a><span>/</span>
            <a href="javasript:;">数码</a>
        </div>
        <div>
            <a href="javasript:;">电脑</a><span>/</span>
            <a href="javasript:;">办公</a><span>/</span>
        </div>
        <div>
            <a href="javasript:;">家居</a><span>/</span>
            <a href="javasript:;">家具</a><span>/</span>
            <a href="javasript:;">家装</a><span>/</span>
            <a href="javasript:;">厨具</a>
        </div>
        <div>
            <a href="javasript:;">男装</a><span>/</span>
            <a href="javasript:;">女装</a><span>/</span>
            <a href="javasript:;">童装</a><span>/</span>
            <a href="javasript:;">内衣</a>
        </div>
        <div>
            <a href="javasript:;">美妆</a><span>/</span>
            <a href="javasript:;">个护清洁</a><span>/</span>
            <a href="javasript:;">宠物</a>
        </div>
        <div>
            <a href="javasript:;">女鞋</a><span>/</span>
            <a href="javasript:;">箱包</a><span>/</span>
            <a href="javasript:;">钟表</a><span>/</span>
            <a href="javasript:;">珠宝</a>
        </div>
        <div>
            <a href="javasript:;">男鞋</a><span>/</span>
            <a href="javasript:;">运动</a><span>/</span>
            <a href="javasript:;">户外</a>
        </div>
        <div>
            <a href="javasript:;">房产</a><span>/</span>
            <a href="javasript:;">汽车</a><span>/</span>
            <a href="javasript:;">汽车用品</a>
        </div>
        <div>
            <a href="javasript:;">母婴</a><span>/</span>
            <a href="javasript:;">玩具乐器</a>
        </div>
        <div>
            <a href="javasript:;">食品</a><span>/</span>
            <a href="javasript:;">酒类</a><span>/</span>
            <a href="javasript:;">生鲜</a><span>/</span>
            <a href="javasript:;">特产</a>
        </div>
        <div>
            <a href="javasript:;">艺术</a><span>/</span>
            <a href="javasript:;">礼品鲜花</a><span>/</span>
            <a href="javasript:;">农资绿植</a>
        </div>
        <div>
            <a href="javasript:;">医药保健</a><span>/</span>
            <a href="javasript:;">计生情趣</a>
        </div>
        <div>
            <a href="javasript:;">图书</a><span>/</span>
            <a href="javasript:;">文娱</a><span>/</span>
            <a href="javasript:;">电子书</a>
        </div>
        <div>
            <a href="javasript:;">机票</a><span>/</span>
            <a href="javasript:;">酒店</a><span>/</span>
            <a href="javasript:;">旅游</a><span>/</span>
            <a href="javasript:;">生活</a>
        </div>
        <div>
            <a href="javasript:;">理财</a><span>/</span>
            <a href="javasript:;">众筹</a><span>/</span>
            <a href="javasript:;">白条</a><span>/</span>
            <a href="javasript:;">保险</a>
        </div>
        <div>
            <a href="javasript:;">安装</a><span>/</span>
            <a href="javasript:;">维修</a><span>/</span>
            <a href="javasript:;">清洗</a><span>/</span>
            <a href="javasript:;">二手</a>
        </div>
        <div>
            <a href="javasript:;">工业品</a>
        </div>
    </nav>
</body>

</html>